/**
 * Created by Tsuna Cheung on 2016/12/22.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    Image,
    ListView,
    ScrollView
} from 'react-native';

const { width } = Dimensions.get('window');
import Header from '../component/HeaderWithoutBack';
/*
* 第三方组件 react-native-swiper
* 官方文档：
* https://github.com/leecade/react-native-swiper#installation
* 安装方法：
* npm i react-native-swiper --save
*
* 我修改了该组件的源文件夹中的index.js文件，将其中的pagination_x内bottom属性设为5，请自行修改
*/
import Swiper from 'react-native-swiper';

export default class Homepage_Tab extends Component {
    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([
                '公司公司公司', '公司公司公司', '公司公司公司', '公司公司公司', '公司公司公司', '公司公司公司', '公司公司公司'
            ])
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <Header name="职信"/>

                <View style={styles.body}>
                    <Swiper height={200}
                            autoplay
                            style={{flex:1}}
                            showsButtons={true}
                    >
                        <View style={styles.slide}>
                            <Image source={{uri: 'http://bunnyhsu.oss-cn-shanghai.aliyuncs.com/figure_1.jpg'}}
                                   style={styles.img}/>
                        </View>

                        <View style={styles.slide}>
                            <Image source={{uri: 'http://bunnyhsu.oss-cn-shanghai.aliyuncs.com/figure_2.jpg'}}
                                   style={styles.img}/>
                        </View>

                        <View style={styles.slide}>
                            <Image source={{uri: 'http://bunnyhsu.oss-cn-shanghai.aliyuncs.com/figure_3.jpg'}}
                                   style={styles.img}/>
                        </View>
                    </Swiper>

                    <ScrollView>
                        <View style={styles.news}>
                            <View style={styles.news1}>
                                <View style={[styles.news_title,{borderTopWidth:1}]}>
                                    <Text style={styles.news_Text}>
                                        公司精选
                                    </Text>
                                </View>
                            <ListView  style={styles.new1_content_item}
                                            dataSource={this.state.dataSource}
                                            renderRow={
                                                (rowData) =>
                                                <View style={styles.news1_content}>
                                                    <Text style={styles.news_Text}>
                                                    {rowData}
                                                    </Text>
                                                </View>
                                            }
                            />
    
                            </View>
    
                            <View style={styles.news1}>
                                <View style={styles.news_title}>
                                    <Text style={styles.news_Text}>
                                        职信精选
                                    </Text>
                                </View>
    
                                <ListView
                                           dataSource={this.state.dataSource}
                                           renderRow={
                                                (rowData) =>
                                                <View style={styles.news1_content}>
                                                    <Text style={styles.news_Text}>
                                                    {rowData}
                                                    </Text>
                                                </View>
                                            }
                                />
                            </View>
                        </View>
                    </ScrollView>
                </View>
            </View>



        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        backgroundColor: "#FFFFFF"
    },
    body: {
        flex: 10
    },
    slide: {
        width,
        flex: 1
    },
    img:{
        width:width,
        height:200
    },
    news:{
        flex:3
    },
    news1:{
        flex:1
    },
    news_title:{
        height:30,
        alignItems:'center',
        borderBottomWidth:1,
        borderColor:'#CACACA',
        justifyContent:'center'
    },
    news_Text:{
        fontSize:15
    },
    news1_content:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        height:30,
        borderBottomWidth:1,
        borderBottomColor:'#CACACA'
    },
    new1_content_item:{
        borderBottomWidth:1,
        borderBottomColor:'#000',
    }

});